<template>
  <div class="main">

    <div style="position: relative;height: 1vh;"></div>
    <div style="position: relative;width: 97%;
        margin-left: 1.8%;box-shadow: 0px 0px 1px 1PX rgb(242, 240, 240);
        display: flex;align-items:flex-start;height: 70vh;overflow-y: scroll;">
      <el-table :data="list">
        <!--prop 后端返回的json数据的字段名-->

        <el-table-column prop="army_name" label="队伍名称" width="400">
        </el-table-column>
        <el-table-column label="操作" width="200">


          <template v-slot="scope">
            <el-button v-for="(item, index) in buttonMenu" v-if="String(item.menuType) == '3'" :key="index" type="text"
              :icon="item.menuicon" @click="e_function_all(item.menuperms, scope.row)">
              {{ item.menuName }}
            </el-button>
          </template>
        </el-table-column>


      </el-table>
    </div>
    <!--分页-->
    <el-pagination @size-change="sizeData" @current-change="pageData" :page-sizes="[5, 10, 20, 30, 100]" :page-size="10"
      layout="total, sizes, prev, pager, next, jumper" :total="count">
    </el-pagination>


    <el-dialog title="地图" :visible.sync="dialogFormVisible" width="60%">
      <vueBmapdemo :addressxy="mapData" @rectionMap="rectionMap" :key="mapkeyxp"></vueBmapdemo>
    </el-dialog>


  </div>
</template>
  
<script>
import ArmyxApi from "@/api/ArmyxRequest.js"
import vueBmapdemo from '@/component/vueBmapdemo.vue'
import coordinateApi from '@/api/coordinateRequest.js'
export default {
  // 组件名称
  name: 'teachermanager',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: { vueBmapdemo },
  // 组件状态值
  data() {
    return {
      list: [],
      searchMap: {
        armyId: null,
        armyFatherId: null,
        armyBigFather: null,
        armyName: null,
        mapId: null,
        orderId: null,
        createTime: null,
        updateTime: null,
        army_nameLike: '师',
        pageNum: 1,
        pageSize: 7,
      },
      //查询属于军队的map
      searchCoord: {
        army_id: 0,
      },
      count: 20,
      dialogFormVisible: false,
      mapData: [],
      mapkeyxp: 0,
    }
  },
  // 计算属性
  computed: {
    //获取vuex的数据
    buttonMenu() {
      return this.$store.getters['operation/getButtonList'];
    },
  },
  // 侦听器
  watch: {

  },
  // 组件方法
  methods: {
    //动态按钮执行方法
    e_function_all(function_name, function_data) {
      if (function_name == 'updateMaper') {
        this.serchMap(function_data);
      }
    },
    fetchData() {
      //编写一个方法请求后端的接口，把返回的数据赋值list
      ArmyxApi.selectList(this.searchMap).then(response => {
        //  //把返回的结果赋值模型

        this.list = response.data.data
        this.count = response.data.total
      })
    },
    //查询更多的实现
    SerchMore() {
      if (this.searchMap.army_nameLike === '') this.searchMap.army_nameLike = null;
      this.searchMap.pageNum = 1;
      this.searchMap.pageSize = 9;
      this.fetchData();
    },
    //当分页大小产生变化的时候调用该方法
    sizeData(size) {
      this.searchMap.pageSize = size - 1
      this.fetchData()
    },
    pageData(page) {
      this.searchMap.pageNum = page
      this.fetchData()
    },
    //查看地图
    serchMap(data) {
      this.searchCoord.army_id = data.army_id;
      coordinateApi.selectList(this.searchCoord).then(res => {
        if (res.data.data.length <= 0) {
          this.mapData = [];
        } else {
          this.mapData = res.data.data;
          this.mapData.forEach((elem, index) => {
            this.mapData[index].lng = this.mapData[index].longitudex;
            this.mapData[index].lat = this.mapData[index].latitudex;
          });
        }
        this.mapkeyxp++;
        this.dialogFormVisible = true;
      })
      // this.dialogFormVisible = true;
    },
    //接受子组件的值
    rectionMap(data) {
      let deleteobj = {
        army_id: this.searchCoord.army_id,
      }


      data.forEach((elem, index) => {
        data[index].army_id = this.searchCoord.army_id;
        data[index].longitudex = data[index].lng;
        data[index].latitudex = data[index].lat;

      });
      coordinateApi.deleteByArmyID(deleteobj).then(res => {
        coordinateApi.insertBatch(data).then(res =>{
          this.dialogFormVisible = false;
        })

      })
    }
  },
  // 以下是生命周期钩子   注：没用到的钩子请自行删除
  /**
  * 在实例初始化之后，组件属性计算之前，如data属性等
  */
  beforeCreate() {
  },
  /**
  * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
  */
  created() {
    //在创建vue实例后触发初始化钩子函数
    this.fetchData();
  },
  /**
  * 在挂载开始之前被调用：相关的 render 函数首次被调用。
  */
  beforeMount() {

  },
  /**
  * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
  */
  mounted() {
  },
  /**
  * 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
  * 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
  */
  beforeUpdate() {
  },
  /**
  * 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
  * 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
  */
  updated() {
  },
  /**
  * keep-alive 组件激活时调用。 仅针对keep-alive 组件有效
  */
  activated() {
  },
  /**
  * keep-alive 组件停用时调用。 仅针对keep-alive 组件有效
  */
  deactivated() {
  },
  /**
  * 实例销毁之前调用。在这一步，实例仍然完全可用。
  */
  beforeDestroy() {
  },
  /**
  * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
  * 所有的事件监听器会被移除，所有的子实例也会被销毁。
  */
  destroyed() {
  }
}
</script> 
  
  
<style scoped ></style>
  